<template>
    <div class="wrap">
           <div class="top"> 小区户型图鉴 </div> 
           <van-tree-select
                v-model:active-id="activeId"
                v-model:main-active-index="activeIndex"
                :items="items"
                @click-item='onitemclick'
                class="tree"
            />
            <div > 
                <p @click="toSearch" style="font-size: 18px; color:orangered;background: white; width: 60%; padding: 10px;"> 户 型 查 询 </p> </div>
    </div>



</template>

<script setup>
import { ref } from 'vue';
import {useRouter, useRoute} from 'vue-router'
let router = useRouter();
let route = useRoute()
const activeId = ref(1);
const activeIndex = ref(0);
const items = [
    {
    text: '北区',
    children: [
        { text: '天悦星院', id: 1 },
        { text: '星福尚岭新筑', id: 2 },
        { text: '越秀滨江盛悦', id: 3 },
        { text: '万科金域国际', id: 4 },
        { text: '泮海蓝湾', id: 5 },
    ],
    },
    {
    text: '南区',
    children: [
        { text: '合景领峰', id: 5 },
        { text: '合景叠翠峰', id: 6 },
        { text: '嘉华新都会', id: 7 },
        { text: '帕佳图双子星', id: 8 },
        { text: '江悦城', id: 9 },
        { text: '恒大御景半岛', id: 10 },
        { text: '朗晴新天地', id: 11 },
        { text: '越秀天悦文华', id: 12 },
    ],
    },
      {
    text: '中区',
    children: [
        { text: '东华名岸', id: 20 },
        { text: '帕佳图六里', id: 21 },
        {text: '二沙岛', id: 22},
        {text: '世纪城圣廷苑', id: 23}
    ],
    },
];

 const onitemclick = (data)=>{
            console.log(data)
              router.push({
                name: 'complexDetail',
                query: { name: data.text, mainIndex: activeIndex.value  }
            })
        }
const toSearch = ()=>{
      router.push({
                name: 'complexDetail',
                query: { name: 'search', mainIndex: activeIndex.value  }
            })
}

</script>

<style lang="scss">
    body {
        margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
    }
    .top{
        margin: 7px auto;
        margin-bottom: 16px;
        width: 100%;
        background: lightcyan;
        padding-bottom: 5px;
        padding-top: 5px;
        font-weight: bold;
        font-size: 17px;
    }
    .tree{
        height: 500px !important;
    }
</style>